<!-- 订单类别 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="search-box flex">
			<view class="input-product m-b-40">
			  <u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)" placeholderColor="rgb(242 242 242 / 85%)" v-model="params.data.keywords" @change="onSearchChange" :showAction="false"></u-search>
			</view>
		</view>
		<view class="list-view">
			<view class="item-view" v-for="(item,index) in listData" :key="index" @click="toCheck(item)">
				{{item.label}}
			</view>
		</view>
		<!-- 筛选弹框 侧边栏 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
		    <view class="pop-view pop-top">
				<view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;">
							<view class="title">
								显示停用
							</view>
							<view class="value">
								<u-switch v-model="sideObj.isEnable" size="18" ></u-switch>
							</view>
						</view>
					</view>
				</view>
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
		<!-- 新增订单类别 -->
		<u-popup :show="addShow" :round="10" :closeOnClickOverlay="false" mode="center">
			<view class="popup-view">
				<view class="title">
					新增订单类别
				</view>
				<view class="form-view m-b-40">
					<view class="form-item">
						<view class="value flex" style="padding-left: 0;">
							<u--input
							    border="surround"
							    v-model="addParams.startNumber"
							  ></u--input>
						</view>
					</view>
					<view class="form-item p-t-20">
						<view class="lable flex">
							<u-switch v-model="addParams.default" size="18" ></u-switch>
							<text class="p-l-20 grey">默认</text>
						</view>
						<view class="lable flex p-l-40">
							<u-switch v-model="addParams.default" size="18" ></u-switch>
							<text class="p-l-20 grey">复核</text>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onSave">
						保存
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {takeDeliveryListSaleOptions} from '@/apis/inventory/procure.js'
	export default {
		name: 'orderCategory',
		data() {
			return {
				config: {
				  title: "订单类别",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  // rightButton: [
				  //   {
				  //     key: "btn1",
				  //     icon: "&#xe727;",
				  //     position: "left",
				  //   },
				  //   {
				  //     key: "btn2",
				  //     icon: "&#xe888;",
				  //     position: "left",
				  //   },
				  // ],
				},
				// 列表
				params: {
					data: {
						keywords: ''
					}
				},
				listData: [],
				// 侧边栏
				show: false,
				sideObj: {},
				// 新增订单类别
				addShow: false,
				addParams: {}
			}
		},
		methods: {
			clickBtn(item) {
			  if (item.key === "btn1") {
				this.addShow = true
			  }
			  if (item.key === "btn2") {
			    this.show = true
			  }
			},
			// 选中
			toCheck(val) {
				if(val) {
					uni.navigateBack()
					
					uni.$emit('takeCategory', val)
				}
			},
			// 搜索
			onSearchChange() {
				this.gettakeDeliveryListSaleOptions()
			},
			// 获取订单类别
			gettakeDeliveryListSaleOptions() {
				uni.showLoading({
					title: '加载中'
				})
				takeDeliveryListSaleOptions(this.params).then(res=>{
					uni.hideLoading()
					if(!res.flag) return;
					this.listData = res.data;
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 侧边栏
			close() {
				this.show = false
				this.gettakeDeliveryListSaleOptions()
			},
			open() {
				
			},
			// 重置
			onReset() {
				this.sideObj = {
					category: '',
					shop: ''
				}
			},
			// 搜索
			onSearch() {
				this.show = false
				this.onReset()
			},
			// 取消
			onCencal() {
				this.addShow = false
				this.addParams = {}
			},
			// 保存
			onSave() {
				this.onCencal()
			}
		},
		mounted() {
			this.gettakeDeliveryListSaleOptions()
		}
	}
</script>
<style lang="scss" scoped>
	.search-box {
		padding-top: 30rpx;
		justify-content: center;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	}
	.input-product {
	  width: 95%;
	  border-radius: 50upx;
	  height: 70upx;
	  line-height: 70upx;
	  color: #fff;
	  display: flex;
	  background: rgba(248, 248, 248, 0.34);
	}
	.item-view {
		height: 80rpx;
		background-color: #fff;
		line-height: 80rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #eee;
		color: #333;
	}
</style>